import React, { useState, useEffect } from 'react';
import * as echarts from 'echarts';

export default function Top1(props: any) {
  let [data, setDate] = useState([150, 230, 224, 218, 135, 147, 260, 343]);
  let data1 = [150, 230, 224, 218, 135, 147, 260, 343];
  let data2 = [343, 454, 456, 567, 234, 784, 436, 234];
  let [xdata, setxDate] = useState([
    '七月第一周',
    '七月第二周',
    '七月第三周',
    '七月第四周',
    '八月第一周',
    '八月第二周',
    '八月第三周',
    '八月第四周',
  ]);
  let xdata1 = [
    '七月第一周',
    '七月第二周',
    '七月第三周',
    '七月第四周',
    '八月第一周',
    '八月第二周',
    '八月第三周',
    '八月第四周',
  ];
  let xdata2 = [
    '2023-08-08',
    '2023-08-09',
    '2023-08-10',
    '2023-08-11',
    '2023-08-12',
    '2023-08-13',
    '2023-08-14',
    '2023-08-15',
  ];

  function Handle() {
    var myChart = echarts.init(document.getElementById('pileUp'));
    var option = {
      title: {
        text: '概况',
        subtext: '近期兑换量',
        left: 0,
        textStyle: {
          color: '#999',
          fontSize: 20,
        },
        subtextStyle: {
          color: '#fff',
          fontSize: 18,
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xdata,
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      series: [
        {
          data,
          type: 'line',
        },
      ],
    };
    myChart.setOption(option);
  }
  useEffect(() => {
    Handle();
  }, []);
  useEffect(() => {
    console.log(props);
    if (props.data == '日') {
      setDate(data1);
      setxDate(xdata1);
    } else {
      setDate(data2);
      setxDate(xdata2);
    }
    Handle();
  }, [props]);
  return <div id="pileUp" style={{ height: '330px', width: '800px' }}></div>;
}
